<template>
  <view class="my-notice">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="通知"></van-nav-bar>
    <!-- #endif -->
    <QcscrollUni ref="mescrollRef" :getData="getData" :height="myNoticeH5">
      <view
        class="list-wrap"
        v-for="(item, index) in scrollListData.list"
        :key="index"
        @tap="clickUrl(item)">
        <view class="left">
          <view class="notice-name-wrap">
            <view :class="{ 'un-read': item.isRead !== 1 }"></view>
            <view class="notice-name">{{ item.noticeTitle }}</view>
          </view>
          <view class="notice-time">{{ item.sendingTime }}</view>
        </view>
        <view class="right">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </QcscrollUni>
  </view>
</template>

<script lang="ts" setup>
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@/mixins/info';
import { pagingNotice } from '@/service/apis/mine';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const bottom = ref(`154rpx`);

let scrollListData = reactive({
  list: [] as Array<any>,
});

const myNoticeH5 = computed(() => {
  // #ifdef H5
  return `${
    getSystemInfo().screenHeight - getSystemInfo().navHeight - getSystemInfo().safeBottom
  }px`;
  // #endif
  return `100%`;
});

const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    pagingNotice({}, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          scrollListData.list = res.dataList;
        } else {
          scrollListData.list = [...scrollListData.list, ...res.dataList];
        }
        resolve({ list: scrollListData.list, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

const clickUrl = (item: any) => {
  item.isRead = 1;
  uni.navigateTo({
    url: `/pagesMyCenter/myNotice/noticeDetail?noticeId=${item.id}`,
  });
};
// onLoad(() => {
//   getData({ pageNum: 1, pageSize: 10 });
// });

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.my-notice {
  height: 100vh;

  .list-wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px;
    background-color: #fff;

    .left {
      // display: flex;
      // flex-flow: row nowrap;
      // align-items: center;
      // justify-content: flex-start;
      text-align: left;
      width: 63%;

      .my-notice-tips {
        width: 4px;
        height: 4px;
        background: #d0021b;
        border-radius: 50%;
      }

      .notice-name-wrap {
        display: flex;
        align-items: center;
      }

      .notice-name {
        width: calc(100% - 16px);
        font-size: 16px;
        color: #242424;
        font-weight: 500;
        overflow: hidden;
        /* 移除隐藏 */
        text-overflow: ellipsis;
        /* 省略号 */
        white-space: nowrap;
        /* 禁止文字自动换行 */
      }

      .un-read {
        width: 8px;
        height: 8px;
        margin-right: 8px;
        background-color: $uni-color-primary;
        border-radius: 5px;
      }

      .notice-time {
        font-size: 14px;
        color: #858585;
        margin-top: 4px;
      }
    }

    .right {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      padding-left: 20px;
      text-align: right;
      color: #202124;
      overflow: hidden;
      /* 移除隐藏 */
      white-space: nowrap;
      /* 禁止文字自动换行 */
      color: #858585;
    }
  }

  .notice-footer {
    z-index: 99;
    width: 100%;
    height: 68px;
    font-size: 14px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;

    .mobile-button {
      /* #ifdef MP-ALIPAY */
      width: 90%;
      /* #endif */
      /* #ifdef  MP-WEIXIN */
      width: 100%;
      /* #endif */
    }
  }

  .notice-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
  }
}
</style>
